﻿@import './base.scss';
html, body, div, p, ul, li, ol, dl, dt, dd, header, footer, video, h1, h2, h3, h4, canvas, section, figure {
  padding: 0;
  margin: 0;
  
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

html, body {
  height: 100%;
  width: 640px;
}
body{
	  font-family: "Helvetica Neue", 'Helvetica', "Microsoft YaHei", '微软雅黑', arial, sans-serif;
	  overflow-x:hidden;
    font-size: 24px;
}
img {
  border: none;
  vertical-align: middle;
  width: 100%;
  height: auto;
}

input, textarea {
  outline: none;
}
$viewW:640px;
.zmiti-main-ui{
  background: #ebebeb;

  
  
  @include pos(a);
  width:640px;
  height: 100vh;
  left:0;


  .zmiti-main-title{
    @include pos(a);
    color:#842d18;
    top: 30%;
    font-size: 40px;
    width: 90%;
    left: 5%;
    text-align: center;

  }
  .zmiti-main-btn{
    color:#842d18;
    @include pos(a);
    top: 66%;
    font-size: 36px;
    width: 220px;
    left: 50%;
    height: 60px;
    line-height: 60px;
    margin-left: -110px;
    text-align: center;
    border:1px solid #842d18;
    @include br(10px);

    &.active{
      @include transform(scale(.95));
      @include transition(.1s);
      &:before{
        content:'';
        @include br(10px);
        box-shadow: 0 0  50px rgba(156,86,50,.8);
        @include pos(a);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
      } 
    }
  }

  .zmiti-main-form{
     width:460px;
     height: 340px;
     @include pos(a);
     left: 50%;
     @include br(20px);
     margin-left: -230px;
     @include transform(translate3d(0,-800px,0));
     @include transition(.5s);
     @include transitionTimingFunction(cubic-bezier(0.49, 1.52, 0.38, 0.84));
     &.active{
        @include transform(translate3d(0,0,0));
     }
     top: 30%;
     background: #e8dbc5;
     .zmiti-form-title{
        text-align: center;
        height: 80px;
        line-height: 80px;
        font-size: 32px;
     }
     .zmiti-form-input{
      text-align: center;
      margin: 20px 0;
      input{
        border:1px solid #999;
        width: 260px;
        height: 38px;
        font-size: 26px;
        -webkit-appearance:none;
        padding:0 10px ;
        @include br(6px);
        box-sizing:border-box;
        outline:none;
      }

     }
     .zmiti-main-submit{
       width: 100px;
       height: 40px;
       line-height: 40px;
       text-align: center;
       background: #b98c45;
       color:#fff;
       @include br(6px);
       margin: 60px auto;
       border:1px solid #8a6530;

       &.active{
          @include transform(scale(.95));
          @include transition(.1s);
          &:before{
            content:'';
            @include br(10px);
            box-shadow: 0 0  50px rgba(138,101,48,.8);
            @include pos(a);
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
          } 
        }
     }
  }
  
}
